<template>
  <div class="my-container">
    <!-- 头部 -->
    <div class="header">
      <!-- 昵称、简介、头像 -->
      <div class="nickname-intro-avatar">
        <div class="nickname-intro">
          <div class="nickname">{{ userInfo.nickname }}</div>
          <div class="intro">{{ userInfo.intro }}</div>
        </div>
        <img
          class="avatar"
          @click="$router.push('/my/info')"
          :src="avatar"
          alt=""
        />
      </div>
      <!-- 提示信息 -->
      <div class="tips">
        <div class="tip">
          <div class="num">{{ userInfo.submitNum }}</div>
          <div class="title">累计答题</div>
        </div>
        <div class="tip">
          <div class="num">{{ userInfo.collectQuestions.length }}</div>
          <div class="title">收藏题目</div>
        </div>
        <div class="tip">
          <div class="num">{{ userInfo.errorNum }}</div>
          <div class="title">我的错题</div>
        </div>
        <div class="tip">
          <div class="num">
            {{ parseInt((userInfo.errorNum / userInfo.submitNum) * 100) }}%
          </div>
          <div class="title">正确率</div>
        </div>
      </div>
      <!-- 岗位信息 -->
      <div class="my-position">
        <my-cell
          @click="$router.push('/my/edit?type=position')"
          icon="&#xe64d;"
          title="我的岗位"
          :content="userInfo.position"
        />
      </div>
    </div>
    <!-- 面试数据 -->
    <div class="interview-data">
      <div class="title">面经数据</div>
      <div class="data">
        <div class="item">
          <div class="add">
            昨日阅读<span class="add-num"
              >+{{ userInfo.shareData.read.yesterday }}</span
            >
          </div>
          <div class="num">{{ userInfo.shareData.read.total }}</div>
          <div class="title">阅读总数</div>
        </div>
        <div class="item">
          <div class="add">
            昨日获赞<span class="add-num"
              >+{{ userInfo.shareData.star.yesterday }}</span
            >
          </div>
          <div class="num">{{ userInfo.shareData.star.total }}</div>
          <div class="title">获赞总数</div>
        </div>
        <div class="item">
          <div class="add">
            昨日新增<span class="add-num"
              >+{{ userInfo.shareData.comment.yesterday }}</span
            >
          </div>
          <div class="num">{{ userInfo.shareData.comment.total }}</div>
          <div class="title">评论总数</div>
        </div>
      </div>
    </div>
    <!-- cell列表部分 -->
    <div class="cells">
      <my-cell class="top" icon="&#xe655;" title="我的面经分享" content="21" />
      <my-cell
        icon="&#xe656;"
        title="我的消息"
        :content="userInfo.systemMessages"
      />
      <my-cell icon="&#xe654;" title="收藏的题库" content="32" />
      <my-cell icon="&#xe648;" title="收藏的企业" content="32" />
      <my-cell icon="&#xe64f;" title="我的错题" :content="userInfo.errorNum" />
      <my-cell
        class="bottom"
        icon="&#xe649;"
        title="收藏的面试经验"
        content="166"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { mapGetters, useStore } from 'vuex'
import MyCell from '@/components/MyCell.vue'

const store = useStore()

const userInfo = store.getters.getUserInfo

const avatar: any = computed(() => {
  return `${import.meta.env.VITE_APP_BASEURL}${userInfo.avatar}`
})
</script>

<style lang="less" scoped>
.my-container {
  .header {
    padding: 31px 15px;
    box-sizing: border-box;
    width: 375px;
    height: 216px;
    opacity: 1;
    background: linear-gradient(45deg, #ce0031, #b8002c);
    .nickname-intro-avatar {
      display: flex;
      align-items: center;
      .nickname-intro {
        flex: 1;
        .nickname {
          height: 30px;
          opacity: 1;
          font-size: 21px;
          font-family: PingFangSC, PingFangSC-Semibold;
          font-weight: 600;
          text-align: left;
          color: #ffffff;
          line-height: 30px;
          letter-spacing: 0px;
        }
        .intro {
          margin-top: 6px;
          height: 17px;
          opacity: 0.7;
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: left;
          color: #ffffff;
          line-height: 17px;
          letter-spacing: 0px;
        }
      }

      .avatar {
        width: 50px;
        height: 50px;
        opacity: 1;
        border: 3px solid rgba(255, 255, 255, 0.38);
        border-radius: 50%;
      }
    }
    .tips {
      margin-top: 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .tip {
        display: flex;
        flex-direction: column;
        .num {
          height: 24px;
          opacity: 1;
          font-size: 21px;
          font-family: DINAlternate, DINAlternate-Bold;
          font-weight: 700;
          text-align: center;
          color: #ffffff;
          line-height: 24px;
          letter-spacing: 0px;
        }
        .title {
          margin-top: 6px;
          height: 17px;
          opacity: 0.7;
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: center;
          color: #ffffff;
          line-height: 17px;
          letter-spacing: 0px;
        }
      }
    }
    .my-position {
      margin-top: 10px;
      padding-top: 8px;
      width: 345px;
      height: 50px;
      opacity: 1;
      background: #ffffff;
      border-radius: 8px;
    }
  }
  .interview-data {
    margin: 30px auto 10px;
    width: 345px;
    height: 143px;
    opacity: 1;
    background: #ffffff;
    border-radius: 8px;
    padding: 19px 15px;
    box-sizing: border-box;
    .title {
      height: 20px;
      opacity: 1;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      color: #181a39;
      line-height: 20px;
      letter-spacing: 0px;
    }
    .data {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      padding: 0px 8px;
      .item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        .add {
          height: 14px;
          opacity: 1;
          font-size: 10px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: center;
          color: #b4b4bd;
          line-height: 14px;
          letter-spacing: 0px;
          .add-num {
            color: #00b8d4;
          }
        }
        .num {
          margin-top: 10px;
          height: 24px;
          opacity: 1;
          font-size: 21px;
          font-family: DINAlternate, DINAlternate-Bold;
          font-weight: 700;
          text-align: center;
          color: #181a39;
          line-height: 24px;
          letter-spacing: 0px;
        }
        .title {
          margin-top: 10px;
          height: 17px;
          opacity: 1;
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: center;
          color: #545671;
          line-height: 17px;
          letter-spacing: 0px;
        }
      }
    }
  }
  .cells {
    margin: 0px auto;
    width: 345px;
    height: 322px;
    .top {
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
    }
    .bottom {
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
    }
  }
}
</style>
